<template>
  <div class="lianxi">
    <ul class="lianxi-ul">
      <li v-for="item in lidata" :key="item.index" :class="{active:isActive==item.index}"  @click="changeClass(item.index)">
        <span style="display:block;font-size: 0.3rem;"> {{item.name}}</span>
      </li>
    </ul>

    <div  style="width: 100%">
      <img width="100%;" src="../assets/images/swipe1.jpg">
    </div>

    <div class="wokCon">
      <div class="item" style="flex-basis:30%">
        <span style="display: block;font-size: 0.8rem;margin-top: 0.8rem;margin-bottom:  0.2rem;">0</span>
        <span style="display: block;font-size: 0.22rem;">做题数</span>
      </div>
      <div class="item" style="flex-basis:30%;">
        <span style="display: block;font-size: 0.8rem;margin-top:  0.8rem;margin-bottom:  0.2rem;color: #4b82d9">30</span>
        <span style="display: block;font-size: 0.22rem;">预测分</span>
      </div>
      <div class="item" style="flex-basis:10%">
        <div style="width: 0.02rem;height: 1.4rem; background: gainsboro;float:right;;margin-bottom:  0.6rem;margin-top:  0.8rem;"></div>
      </div>
      <div class="item" style="flex-basis:30%;margin-top:0.8rem;">
        <img style="width:1.4rem;" src="../assets/logo.png">
      </div>
    </div>

    <div class="lianxiBottom">
      <div class="pfwk">
        <div style="float:left;width: 40%;">
          <div style="width: 1.5rem;height: 1.5rem;background-color: #4b82d9;border-radius: 1.5rem;margin:0.25rem 0.8rem">
            <span class="icon iconfont icon-lianxi" style="font-size: 0.8rem;color: white;line-height: 1.5rem"></span>
          </div>
        </div>

        <div style="float: left;width: 50%;">
          <span style="display:block;font-size: 0.5rem;text-align: left;margin-top: 0.3rem;color: #4b82d9">专题练习</span>
          <span style="display:block;font-size: 0.2rem;text-align: left;margin-top: 0.3rem">加强专业知识，提高专业成绩</span>
        </div>
      </div>

      <div class="pfwk">
        <div style="float:left;width: 40%;">
          <div style="width: 1.5rem;height: 1.5rem;background-color:darkseagreen;border-radius: 1.5rem;margin:0.25rem 0.8rem">
            <span class="icon iconfont icon-shuben" style="font-size: 0.8rem;color: white;line-height: 1.5rem"></span>
          </div>
        </div>
        <div style="float: left;width: 50%;">
          <span style="display:block;font-size: 0.5rem;text-align: left;margin-top: 0.3rem;color: #4b82d9">智能组卷</span>
          <span style="display:block;font-size: 0.2rem;text-align: left;margin-top: 0.3rem">加强专业知识，提高专业成绩</span>
        </div>
      </div>
    </div>

    <div style="padding:0 0.2rem;">
      <Copyright></Copyright>
    </div>
    <div style="width: 100%;height: 1rem"></div>
  </div>
</template>

<script>
  import Copyright from '@/components/common/Copyright'
  import Bottomnav from '@/components/common/Bottomnav'
  export default {
    name: 'Lianxi',
    data () {
      return {
        isActive: 0,
        lidata: [
          {index: 0, name: '做题'},
          {index: 1, name: '计划'}
        ]
      }
    },
    methods: {
      changeClass (index) {
        this.isActive = index
      }
    },
    components: {
      Copyright,
      Bottomnav
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .lianxi{
  }
  .lianxi-ul{
    list-style:none; /* 去掉ul前面的符号 */
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width: auto; /* 宽度根据元素内容调整 */
  }
  .lianxi-ul >li{
    list-style:none;
    float:left;
    width:50%;
    margin-bottom: 0.01rem;
    height: 0.9rem;
    line-height: 1rem;
  }
  .active{
    color: #4b82d9;
    border-bottom: #4b82d9 solid 0.02rem;
  }
  .wokCon{
    display: flex;
    box-shadow:0px 10px 15px gainsboro;
  }
  .wokCon >.item{
    flex-basis:25%
  }
  .lianxiBottom{
    padding:0.2rem;
  }
  .lianxiBottom >.pfwk{
    height: 2rem;
    width: 100%;
    box-shadow: 0px 10px 15px gainsboro;
    margin-top: 0.1rem;
  }
</style>
